<template>
  <el-card shadow="never" class="portal-eChart-box">
    <div slot="header" class="portal-common-title">
      <span>{{ title }}</span>
    </div>
    <!-- <el-tabs @tab-click="handleClick" v-model="activeName">
      <el-tab-pane label="区域数据" name="regionChart">
        <div ref="regionChart" id="regionChart" class="chart" style="height: 350px"></div>
      </el-tab-pane>
      <el-tab-pane label="新增数据" name="insteadChart">
        <div ref="insteadChart" id="insteadChart" style="height: 350px"></div>
      </el-tab-pane>
    </el-tabs> -->
    <div class="eChart-box-body">
      <div ref="chart" id="chart" v-show="!isEmpty"></div>
      <div class="portal-common-noData portal-common-noData-eChart" v-show="isEmpty">
        <img src="@/assets/images/portal-nodata.png" alt="" class="noData-img" />
        <p class="noData-txt">暂无数据</p>
      </div>
    </div>
  </el-card>
</template>

<script>
import echartMixin from '@/components/VisualPortal/mixins'
export default {
  mixins: [echartMixin]
}
//   import echarts from 'echarts'
// import resize from '@/components/Charts/mixins/resize'
// export default {
//   mixins: [resize],
//   props: {
//     title: { type: String, default: '' },
//     option: { type: Object, default: () => {} }
//   },
//   data() {
//     return {
//       chart: null,
//       currOption: {},
//       isEmpty: false
//     }
//   },
//   mounted() {
//     console.log(this.option)
//     this.currOption = this.option
//     this.initChart()
//   },
//   watch: {
//     option: {
//       handler(val) {
//         this.currOption = val
//         this.isEmpty = JSON.stringify(val) === '{}'
//         if (!this.isEmpty) this.initChart()
//       },
//       deep: true
//     }
//   },
//   methods: {
//     initChart() {
//       this.chart = echarts.init(this.$refs.chart)
//       this.chart.setOption(this.currOption)
//       setTimeout(() => {
//         this.$nextTick(() => {
//           this.chart.resize()
//         })
//       }, 50)
//     }
//   },
//   beforeDestroy() {
//     if (!this.chart) return
//     this.chart.dispose()
//     this.chart = null
//   }
// }
</script>
